import { Component } from 'react'
import {
    BrowserRouter,
    Routes,
    Route,
    NavLink,
    Navigate
} from 'react-router-dom'
import '../css/index.css'
import routers from '../router/index'
class Indexc extends Component {
    constructor() {
        super()
        this.state = {

        }
    }
    render() {
        return (
            <BrowserRouter>
                <div className='container'>
                    <div className='tabbar'>
                        <p><NavLink to="/onec" className={({ isActive }) => isActive ? 'active' : ''}>Onec</NavLink></p>
                        <p><NavLink to="/twoc" className={({ isActive }) => isActive ? 'active' : ''}>Twoc</NavLink></p>
                        <p><NavLink to="/threec" className={({ isActive }) => isActive ? 'active' : ''}>Threec</NavLink></p>
                    </div>
                    <div>
                        <Routes>
                            {
                                routers.map((e, i) => {
                                  return  <Route path={e.path} element={e.element} key={i}></Route>
                                })
                            }
                        </Routes>
                    </div>
                </div>
            </BrowserRouter>

        )
    }
}

export default Indexc